<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>公开招聘</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="recruitSelect" :style="'height:'+tableHeight+'px'">
      <el-row style="width:80%;margin:0 auto">
        <el-col :span="12">
          <div class="selectItem" @click="goIndex(1)">
            <i class="select_icon select_icon_1"></i>
            <span>应届毕业生招聘</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="selectItem" @click="goIndex(2)">
            <i class="select_icon select_icon_2"></i>
            <span>在职人员招聘</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="selectItem" @click="goIndex(3)">
            <i class="select_icon select_icon_3"></i>
            <span>其他招聘</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableHeight: 100
    }
  },
  methods: {
    goIndex (type) {
      this.$router.push({name: `recruitIndex`, query: {type: type}})
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      let myheight = 165
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - myheight
      })
    }
  },
  mounted () {
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style scoped>
#recruitSelect {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background-color: #f9f9f9;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin: 0 0 0 10px;
  padding:10px;
  width: calc(100% - 20px);
}
.selectItem{
  text-align: center;
  font-size:24px;
  font-weight: bolder;
  cursor: pointer;
  width: 200px;
  height: 250px;
  margin: 150px auto 0;
  color: #004DA0;
}
.select_icon{
  width:200px;
  height:200px;
  display: block;
}
.select_icon_1{
  background: url(../assets/recruiticon1.png) no-repeat top center;
}
.select_icon_2{
  background: url(../assets/recruiticon2.png) no-repeat top center;
}
.select_icon_3{
  background: url(../assets/recruiticon3.png) no-repeat top center;
}
</style>
